<template>
	<el-cascader v-model="viewModel" @change="change" :props="props" :placeholder="'请选择或搜索'+label" :options="treeData" filterable v-if="treeData"></el-cascader>
</template>

<script>
	/* eslint-disable */
	import api from 'api'
	import ala from 'ala'
	export default {
		model: {
			prop: 'dataModel',
			event: 'change'
		},
		props: {
			type: {},
			label: {
				default: ''
			},
			size: {},
			multiple: {
				default: false
			},
			isDiy: {
				default: false
			},
			dataModel: {}
		},
		data() {
			return {
				props: {
					multiple: false,
					expandTrigger: 'hover'
				},
				resultValue: null, // x-relation-select 返回的值
				treeData: null,
				viewModel: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.props.multiple = this.multiple
				this.treeData = await api.relationTree(this.type, this.isDiy)
				if (!this.treeData) {
					this.$ala.error('类型输入错误')
				}
				if (this.dataModel) {
					this.viewModel = this.setValue()
				} else {
					this.viewModel = []
				}
				this.change()
				// 数据量大时解决卡顿问题
				setTimeout(() => {
					// this.setViewModel()
					// this.change()
					this.$forceUpdate()
				}, 100)
			},

			// 数据回绑
			setValue() {
				var dataSource = {}
				var list = []
				if (!this.multiple) {
					list.push(this.dataModel)
				} else {
					this.treeData.forEach(item => {
						for (let j of this.dataModel) {
							if (item.value === j) {
								dataSource[j] = [j]
							} else {
								if (item.children) {
									let k = item.children.find(r => r.value == j)
									if (k) dataSource[j] = [item.value, k.value]
								}
							}
						}
					})
					for (let i in dataSource) {
						list.push(dataSource[i])
					}
				}
				return list
			},
			// 获取父节点数组
			setViewModel() {
				var count = 0
				var resultArray = []
				var dataModelArray = []
				if (this.dataModel) {
					if (this.multiple === false) {
						dataModelArray.push(this.dataModel)
					} else {
						dataModelArray = this.dataModel
					}
				}
				if (this.treeData && dataModelArray) {
					for (var i = 0; i < dataModelArray.length; i++) {
						count++
						var data = dataModelArray[i]
						var selectArray = []
						for (var oneIndex = 0; oneIndex < this.treeData.length; oneIndex++) {
							count++
							var oneData = this.treeData[oneIndex]
							if (oneData.value === data) {
								selectArray.push(oneData)
								break
							}
							if (oneData.children) {
								for (var twoIndex = 0; twoIndex < oneData.children.length; twoIndex++) {
									count++
									var twoData = oneData.children[twoIndex]
									if (twoData.value === data) {
										selectArray.push(oneData.value)
										selectArray.push(twoData.value)
										break
									}
									if (twoData.children) {
										for (var threeIndex = 0; threeIndex < twoData.children.length; threeIndex++) {
											count++
											var threeData = twoData.children[threeIndex]
											if (threeData.value === data) {
												selectArray.push(oneData.value)
												selectArray.push(twoData.value)
												selectArray.push(threeData.value)
												break
											}
										}
									}
								}
							}
						}
						resultArray.push(selectArray)
					}
				}
				if (this.multiple === false) {
					// 2020年4月3日 验证 单选可以生效
					this.viewModel = this.dataModel
				} else {
					this.viewModel = this.dataModel
				}
			},
			// 获取值，单选的时候返回long，多选的时候返回数组
			change() {
				if (this.viewModel) {
					this.resultValue = []
					if (this.multiple === false) {
						this.resultValue = this.getLastValue(this.viewModel)
					} else {
						this.viewModel.forEach(r => {
							var value = this.getLastValue(r)
							if (this.multiple === true) {
								this.resultValue.push(value)
							}
						})
					}
				}
			},
			getLastValue(array) {
				if (array.constructor === Array) {
					var value = array[array.length - 1]
					if (value.constructor === Array) {
						return this.getLastValue(value)
					} else {
						return value
					}
				} else {
					return array
				}
			}
		},
		watch: {
			viewModel: {
				deep: true,
				handler(val) {
					this.$emit('change', this.resultValue)
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	.el-cascader {
		width: 100%;
	}

	.el-cascader-menu__wrap {
		width: 320px;
	}
</style>